// 引入样式
import './index.css'

// 定义状态数据,    模拟生命周期
import { useState, useEffect } from 'react'
// import * as echarts from 'echarts';
// import { useRef } from 'react'
// import dayjs from 'dayjs'

// 右上角组件
import RightTop from '../../components/page/right/rightTop';
// 右下角组件
import RightBottom from '../../components/page/right/rightBottom';
// 中间
import Centermu from '../../components/page/center/centermu';
// 中间导航
import Cnav from '../../components/page/center/cnav/cnav';
// 左下角
import LeftBottom from '../../components/page/left/leftBottom';
// 引入图片
// import tu from '../../assets/images/nav.png'

// 引入接口
import { getWearher } from '../../request'

const Home = () => {
    let [wearher, setwearher] = useState([])
    let [yesdata, setyesdata] = useState([])
    // let [xuefen, setxuefen] = useState([])

    // const lxuebox = useRef(null)

    // const [option, setoption] = useState({
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //     legend: {
    //         data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    //         // 图例字体颜色
    //         textStyle: {
    //             color: '#fff'
    //         },
    //         // 图例形状 圆
    //         icon: 'circle'
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         containLabel: true
    //     },

    //     xAxis: {
    //         type: 'category',
    //         boundaryGap: false,
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             name: 'Email',
    //             type: 'line',
    //             stack: 'Total',
    //             data: [120, 132, 101, 134, 90, 230, 210],
    //             //   取消折线之间的点
    //            showSymbol: false,
    //             //   折线之间幅度平滑
    //             smooth: true
    //         },
    //         {
    //             name: 'Union Ads',
    //             type: 'line',
    //             stack: 'Total',
    //             data: [220, 182, 191, 234, 290, 330, 310],
    //            showSymbol: false,
    //             smooth: true
    //         },
    //         {
    //             name: 'Video Ads',
    //             type: 'line',
    //             stack: 'Total',
    //             data: [150, 232, 201, 154, 190, 330, 410],
    //            showSymbol: false,
    //             smooth: true
    //         },
    //         {
    //             name: 'Direct',
    //             type: 'line',
    //             stack: 'Total',
    //             data: [320, 332, 301, 334, 390, 330, 320],
    //             showSymbol: false,
    //             smooth: true
    //         },
    //         {
    //             name: 'Search Engine',
    //             type: 'line',
    //             stack: 'Total',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //            showSymbol: false,
    //             smooth: true
    //         }
    //     ]
    // })

    useEffect(() => {
        // 天气
        getWearher(
            { city: '北京' }
        ).then(res => {
            setwearher(res.data.data[0])
            setyesdata(res.data.data[1])
            //   console.log(res.data.data[0].low);     
        })

    }, [])
    // console.log(wearher);
    // console.log(xuefen);

    //  let [wearher1, setwearher1] = useState([])
    // useEffect(() => {
    //     (
    //         async()=>{
    //            await  getWearher(
    //             { city: '北京' }
    //         ).then(res => {
    //             setwearher(res.data.data)
    //             //   console.log(res.data.data[0].low);
    //         })
    //         }
    //     )()

    //     }, [])
    return (
        <div className='box'>
            <header></header>
            <main>
                <div className='left'>
                    {/* 天气 */}
                    <div className='ltop'>
                        <div className='ltit'>
                            环境监测
                        </div>
                        <div className='lbox'>

                            <div className='tu'>

                                <h2>{wearher.low}</h2>
                                <div style={{ display: 'flex', alignContent: 'center', marginTop: '13px' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column',alignContent:'center' }}>
                                        <span className='aa1'></span>
                                        <span>~</span>
                                    </div>

                                    <p>{wearher.high}</p>
                                </div>

                                <p style={{ color: 'yellow' }}><i className='iconfont icon-taiyang'></i>{wearher.type}</p>

                            </div>
                            <div className='tt'>
                                <p style={{ display: 'flex', justifyContent: 'space-between' }}> 
                                    <span><i className='iconfont icon-tiganwendu'></i>体感</span> 
                                    <span>{wearher.low}</span>
                                    </p>
                                <p style={{ display: 'flex', justifyContent: 'space-between' }}> 
                                    <span><i className='iconfont icon-fengli'></i>风力</span>
                                    <span>{wearher.fengli}</span> 
                                    </p>
                                <p style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <span><i className='iconfont icon-shidu'></i>温度</span> 
                                    <span>{wearher.low}</span>
                                    </p>
                            </div>
                            <div className='qin'>
                                <div className='la'>
                                    <div className='laa'>
                                        <p>{wearher.low}~{wearher.high}</p>
                                        <p><i className='iconfont icon-yueliang'></i></p>
                                    </div>
                                    <div className='lab'>
                                        <p>{wearher.week}</p>
                                        <p className='hh'></p>
                                        <p>{wearher.type}</p>
                                    </div>
                                </div>
                                <div className='lb'>
                                    <div className='laa'>
                                        <p>{yesdata.low}~{yesdata.high}</p>
                                        <p><i className='iconfont icon-taiyang'></i></p>
                                    </div>
                                    <div className='lab'>
                                        <p>{yesdata.week}</p>
                                        <p className='hh'></p>
                                        <p>{yesdata.type}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div className='lbot'>
                           <div className='ltit'>
                            学生分布情况
                        </div>
                    <div className='lba'>
                     
                        {/* 图片 */}
                        {/* <img src={tu}></img> */}
                        {/* <img src={require('../../assets/images/nav.png')}></img> */}
                        {/* <i className='iconfont icon-dianliang'></i> */}
                        <div className='lxue' >
                            <LeftBottom></LeftBottom>
                        </div>
                    </div>
                    
                    </div>
                </div>
                <div className='center'>
                    {/* 旋转木马 */}
                    <div className='ctop'>
                        <Centermu></Centermu>
                    </div>
                    <div className='cnav'>
                        <Cnav></Cnav>
                    </div>
                    

                </div>
                <div className='right'>
                    <div className='rtop'>
                        <RightTop></RightTop>
                    </div>
                    <div className='rbot'>
                        <RightBottom></RightBottom>
                    </div>
                </div>
            </main>
        </div>
    )
}

export default Home;